<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animation</title>
    <meta name="description" content="Animation - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <a-mixin id="ball" geometry="primitive: sphere; radius:1" material="shader: flat; color: red"></a-mixin>
        <a-mixin id="opacity" attribute="material.opacity" dur="2000" direction="alternate" fill="forwards"
                 ease="linear" repeat="indefinite" from="0.3" to="1.0"></a-mixin>
        <a-mixin id="spin" attribute="rotation" dur="4000"
                 repeat="indefinite" easing="linear" dur="3000" to="0 0 360"></a-mixin>
      </a-assets>

      <a-entity position="0 0 80">
        <a-camera></a-camera>
      </a-entity>

      <a-entity id="fans"></a-entity>
    </a-scene>

    <script>
      var i;
      var fansEl = document.querySelector('#fans');
      var numRows = 4;
      var numFans = 3;
      var numFanRows = 3;
      var numBalls = 11;
      var ball =
        '<a-entity>' +
          '<a-entity mixin="ball">' +
            '<a-animation mixin="opacity"></a-animation>' +
          '</a-entity>' +
        '</a-entity>';
      var ballEl;
      var rowEl;
      var ballInitX = -15;
      var fanInitX = -60;
      var fanInitY = -40;
      var offset;

      for (var n = 0; n < numFanRows; ++n) {
        var fanRow = document.createElement('a-entity');
        fanRow.setAttribute('position', { x: 0, y: fanInitY - (n * fanInitY), z: 0 });
        for (var k = 0; k < numFans; ++k) {
          var fanEl = document.createElement('a-entity');
          fanEl.setAttribute('position', { x: fanInitX - (k * fanInitX), y: 0, z: 0});
          var animationEl = document.createElement('a-animation');
          animationEl.setAttribute('mixin', 'spin');
          fanEl.appendChild(animationEl);
          for (var i = 0; i < numRows; ++i) {
            var rowEl = document.createElement('a-entity');
            rowEl.setAttribute('rotation', { x: 0, y: 0, z: i * (180 / numRows) });
            for (var j = 0; j < numBalls; ++j) {
              offset = ballInitX + 3 * j;
              if (offset === 0) { continue; }
              var ballEl = document.createElement('a-entity');
              ballEl.setAttribute('position', { x: ballInitX + 3 * j, y: 0, z: 0 });
              ballEl.innerHTML = ball;
              animationEl = ballEl.querySelector('a-animation');
              animationEl.setAttribute('delay', Math.random() * 2000);
              rowEl.appendChild(ballEl);
            }
            fanEl.appendChild(rowEl);
          }
          fanRow.appendChild(fanEl);
        }
        fansEl.appendChild(fanRow);
      }
    </script>
  </body>
</html>
